<div class="row wrapper white-bg page-heading">
  <div class="container-fluid">
    <h2>角色列表</h2>
  </div>
  <hr/>
  <div class="container-fluid">
    <div class="container-fluid col-md-4">
      <div class="form-group">
        <button class="btn btn-primary" ng-click="roleListCtrl.addRole()">新增角色</button>
      </div>
      <table class="table table-hover">
        <thead>
        <tr>
          <th>名称</th>
          <th>描述</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="role in roleListCtrl.roleLIst" ng-click="roleListCtrl.showDetail($index)">
          <td>{{role.roleName}}</td>
          <td>{{role.roleDesc}}</td>
          <td>
            <button  class="btn btn-danger btn-xs" ng-click="roleListCtrl.delete(role.roleId)">删除</button>
            <button class="btn btn-primary btn-xs" ng-click="roleListCtrl.edit($index)">修改</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="container-fluid col-md-8">
      <div class="form-group">
        <button class="btn btn-primary" ng-click="roleListCtrl.submit()">保存</button>
      </div>
      <div class="orderDetailBox roleBox" style="margin-bottom:15px;">
        <div class="title">角色信息</div>
        <ul class="roleMain orderMain">
          <li>
            <div class="col-md-2"><b>角色名称:</b></div>
            <div class="col-md-6"><input class="form-control" type="text" ng-model="roleListCtrl.roleDetail.roleName"
                                         placeholder="请填写名称"></div>
          </li>
          <li>
            <div class="col-md-2"><b>角色描述:</b></div>
            <div class="col-md-6"><input class="form-control" type="text" ng-model="roleListCtrl.roleDetail.roleDesc"
                                         placeholder="请填写名称"></div>
          </li>
        </ul>
      </div>
      <div class="orderDetailBox roleBox">
        <div class="title">功能权限</div>
        <div ng-repeat="(key,item) in roleListCtrl.resourcesList">
          <div class="secondTitle">{{item.name}}</div>
          <div class="form-group roleLine" style="overflow:hidden;margin-bottom:0;">
            <div ng-click="roleListCtrl.changeChecked(key,index)" style="outline:none;" class="col-sm-3 roleItem" ng-repeat="(index,value) in item.list">
              <i style="display: inline-block;vertical-align: middle" ng-if="value.checked" class="checked iconfont">&#xe64d;</i>
              <i style="display: inline-block;vertical-align: middle" ng-if="!value.checked"
                 class="noChecked iconfont">&#xe720;</i>
              <span style="vertical-align: middle;display:inline-block;">{{value.name}}</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
